<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.global.js'></script>
</head>

<body>
    <!-- XSS攻击 Cross Site Script -->
    <h3>以下是用户评论</h3>
    <div id="comment">
        <!-- 形成XSS攻击 -->
        <script>
            console.log(document.cookie);
            alert("恭喜您的cookie已经被上传到黑客的服务器了")
        </script>

        <!-- script脚本两侧的尖括号已经替换为小于号和大于号 只会显式文本 无法形成XSS攻击 -->
        &lt;script&gt;
            console.log(document.cookie);
            alert("恭喜您的cookie已经被上传到黑客的服务器了")
        &lt;/script&gt;
    </div>
    hr

    <div id="example1" class="demo">
        <p>Using mustaches: {{ rawHtml }}</p>
        
        <p>
            Using v-html directive: 
            <!-- rawHtml中的Dom结构会变成div的children -->
            <div v-html="rawHtml"></div>
        </p>
    </div>

    <script>
        const RenderHtmlApp = {
            data() {
                return {
                    rawHtml: '<span style="color: red">This should be red.</span>',
                }
            }
        }
        Vue.createApp(RenderHtmlApp).mount('#example1');
    </script>
</body>

</html>